<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      border: 1px solid #000;
    }
    #mainDiv{
      width: 200px;
      height: 1000px;
    }
    .head{
      background-color: aqua;
      height: 30px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }
    .body{
      background-color: yellow;
      height: 260px;
      text-align: center;
      display: none;
    }
  </style>

  <script>
    function showBody(divId){
      //得到要显示div的对象
       var divObj = document.getElementById(divId);
       if(divObj.style.display == "block"){//如果该div为显示，则隐藏
           divObj.style.display = "none";
       }
       else{//如果该div为隐藏，则显示
         divObj.style.display = "block";
       }
    }
  </script>
</head>
<body>
    <div id="mainDiv">
        <div class="head" onclick="showBody('friendDiv')">好友</div>
        <div class="body" id="friendDiv">
          阳顶天<br>
          陈近南<br>
          韦小宝
        </div>
        <div class="head" onclick="showBody('parentDiv')">亲人</div>
        <div class="body" id="parentDiv">
          令狐冲<br>
          张康年<br>
          胡斐
        </div>
        <div class="head" onclick="showBody('blackDiv')">黑名单</div>
        <div class="body" id="blackDiv">
          海大富<br>
          岳不群<br>
          林平之
        </div>
    </div>
</body>
</html>
